<script setup>
import WOW from "wow.js";
import {ref, onMounted, reactive, onUpdated, defineProps, watch} from "vue";
import {useRouter, useRoute} from "vue-router";
import {getshop} from "../../api/index";
import {useCounterStore} from "../../pina/index";
const store = useCounterStore();
const prop = defineProps({
  msg: String,
  bac: {default: false},
});
console.log(prop.bac);
const router = useRouter();

const getdart = async () => {
  const {rows} = await getshop();
  tableData.d = rows;
  if (rows) {
    // store.incrementKey(rows[0])
  }
};

watch(
  () => router.currentRoute.value.path,
  (newValue, oldValue) => {
    console.log("watch", newValue);

    if (newValue == "/zhu/service") {
      getdart();
    }
  },
  {immediate: true}
);

const handleSelect = (e) => {
  console.log(e);
  router.push({
    name: `${e}`,
  });
};

const activeIndex2 = ref("service");

const shouq = () => {
  router.push({
    name: "authorization",
  });
};

let tableData = reactive({d: []});
</script>

<template>
  <div style="padding: 0 20px">
    <header
      class="header"
      style="display: flex; justify-content: space-between"
    >
      <!-- <logo   /> -->
      <div
        style="
          margin-left: 20px;
          border-radius: 10px;
          background-color: #fff;
          width: 150px;
        "
      >
        <el-menu
          style=""
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="vertical"
          background-color=""
          active-text-color="rgb(78 168 185)"
          @select="handleSelect"
        >
          <el-menu-item
            style="
              text-align: center;
              font-weight: 700;
              font-size: 14px;
              border-bottom: 1px solid #efefef;
            "
            index="service"
            >授权</el-menu-item
          >
          <el-menu-item
            style="text-align: center; font-size: 14px; font-weight: 700"
            index="Plugins"
            >插件下载</el-menu-item
          >
          <!-- <el-menu-item style="text-align: center; font-size: 14px;
     font-weight:700" index="3">套餐价格</el-menu-item>
 -->
        </el-menu>
      </div>
      <div
        style="
          position: relative;
          width: 90%;
          height: calc(100vh - 70px);
          background-color: #fff;
          margin-left: 20px;
          border-radius: 10px;
          padding: 20px;
        "
      >
        <el-button
          @click="shouq"
          style="color: #fff; margin-bottom: 20px; font-size: 12px"
          type="primary"
          color="rgb(78 168 185)"
          round
          >+ 授权店铺</el-button
        >
        <el-table :data="tableData.d" header-row-class-name="tableRowClassName">
          <el-table-column prop="name" label="店铺名称" width="180" />
          <el-table-column prop="clientId" label="client_id" width="180" />
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column prop="updateTime" label="修改时间" />
        </el-table>
        <div
          style="
            width: 97%;
            position: absolute;
            z-index: 999;
            top: 20px;
            left: 20px;
            background-color: #fff;
          "
        >
          <router-view />
        </div>
      </div>
    </header>
  </div>
</template>

<style scoped>
.header {
  width: 100%;
}

:deep(.tableRowClassName .el-table__cell.is-leaf) {
  background: #eeeff3 !important;
  color: #000 !important;
}
.setSuccess {
  background: green !important;
  color: white !important;
}
.setHeight {
  color: blue !important;
}
</style>
